<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>可以输入也可以下拉选择的select</title>
<meta name="keywords" content="jquery" />
<meta name="description" content="Helloweba演示平台，演示XHTML、CSS、jquery、PHP案例和示例" />
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://www.helloweba.com/demo/css/main.css" />
<link rel="stylesheet" type="text/css" href="jquery.editable-select.min.css" />
<style type="text/css">
.demo{width:360px;margin:50px auto 10px auto;padding:10px;}
.demo p{line-height:30px;}
.demo h3{font-size:24px;text-align:center;padding:10px}
@media (max-width: 480px){
	.demo{width:360px;margin:50px auto 10px auto;padding:10px;}
	.demo img{width:90%}
	.demo h3{font-size:1.5em;line-height:1.9em}
}

</style>
</head>

<body>
<div id="header">
</div>

<div id="main">
   <h2 class="top_title"><a href="http://www.jb51.net/view-blog-348.html">可以输入也可以下拉选择的select</a></h2>
   <div class="demo">
		<p>输入内容试试，支持中文</p>
		<select id="editable-select" class="form-control">
    <option>Alfa Romeo</option>
    <option>Audi</option>
	<option>中国人民银行</option>
    <option>中国人民</option>
    <option>中国</option>
    <option>BMW</option>
    <option>Citroen</option>
    <option>Fiat</option>
    <option>Ford</option>
    <option>Jaguar</option>
    <option>Jeep</option>
    <option>Lancia</option>
    <option>Land Rover</option>
    <option>Mercedes</option>
    <option>Mini</option>
    <option>Nissan</option>
    <option>Opel</option>
    <option>Peugeot</option>
    <option>Porsche</option>
    <option>Renault</option>
</select>
	<br/>
	<p>支持html</p>
	<select id="html" class="form-control">
					<option>Alfa Romeo - &lt;small&gt;&lt;a href="http://www.alfaromeo.com/" target="_blank" rel="nofollow"&gt;www.alfaromeo.com&lt;/a&gt;&lt;/small&gt;</option>
					<option>Audi - &lt;small&gt;&lt;a href="http://www.audi.com/" target="_blank" rel="nofollow"&gt;www.audi.com&lt;/a&gt;&lt;/small&gt;</option>
					<option>BMW - &lt;small&gt;&lt;a href="http://www.bmw.com/" target="_blank" rel="nofollow"&gt;www.bmw.com&lt;/a&gt;&lt;/small&gt;</option>
					<option>Citroen - &lt;small&gt;&lt;a href="http://www.citroen.com/" target="_blank" rel="nofollow"&gt;www.citroen.com&lt;/a&gt;&lt;/small&gt;</option>
					<option>Fiat - &lt;small&gt;&lt;a href="http://www.fiat.com/" target="_blank" rel="nofollow"&gt;www.fiat.com&lt;/a&gt;&lt;/small&gt;</option>
					<option>Ford - &lt;small&gt;&lt;a href="http://www.ford.com/" target="_blank" rel="nofollow"&gt;www.ford.com&lt;/a&gt;&lt;/small&gt;</option>
					<option>Helloweba - &lt;small&gt;&lt;a href="http://www.helloweba.com/" target="_blank" rel="nofollow"&gt;www.helloweba.com&lt;/a&gt;&lt;/small&gt;</option>
					<option>Jaguar - &lt;small&gt;&lt;a href="http://www.jaguar.com/" target="_blank" rel="nofollow"&gt;www.jaguar.com&lt;/a&gt;&lt;/small&gt;</option>
					<option>Jeep - &lt;small&gt;&lt;a href="http://www.jeep.com/" target="_blank" rel="nofollow"&gt;www.jeep.com&lt;/a&gt;&lt;/small&gt;</option>
					<option>Lancia - &lt;small&gt;&lt;a href="http://www.lancia.com/" target="_blank" rel="nofollow"&gt;www.lancia.com&lt;/a&gt;&lt;/small&gt;</option>
					<option>Land Rover - &lt;small&gt;&lt;a href="http://www.landrover.com/" target="_blank" rel="nofollow"&gt;www.landrover.com&lt;/a&gt;&lt;/small&gt;</option>
					<option>Mercedes - &lt;small&gt;&lt;a href="http://www.mercedes-benz.com/" target="_blank" rel="nofollow"&gt;www.mercedes-benz.com&lt;/a&gt;&lt;/small&gt;</option>
					<option>Mini - &lt;small&gt;&lt;a href="http://www.mini.com/" target="_blank" rel="nofollow"&gt;www.mini.com&lt;/a&gt;&lt;/small&gt;</option>
					<option>Nissan - &lt;small&gt;&lt;a href="http://www.nissan.it/" target="_blank" rel="nofollow"&gt;www.nissan.it&lt;/a&gt;&lt;/small&gt;</option>
					<option>Opel - &lt;small&gt;&lt;a href="http://www.opel.com/" target="_blank" rel="nofollow"&gt;www.opel.com&lt;/a&gt;&lt;/small&gt;</option>
					<option>Peugeot - &lt;small&gt;&lt;a href="http://www.peugeot.com/" target="_blank" rel="nofollow"&gt;www.peugeot.com&lt;/a&gt;&lt;/small&gt;</option>
					<option>Porsche - &lt;small&gt;&lt;a href="http://www.porsche.com/" target="_blank" rel="nofollow"&gt;www.porsche.com&lt;/a&gt;&lt;/small&gt;</option>
					<option>Renault - &lt;small&gt;&lt;a href="http://www.renault.com/" target="_blank" rel="nofollow"&gt;www.renault.com&lt;/a&gt;&lt;/small&gt;</option>
					<option>Smart - &lt;small&gt;&lt;a href="http://www.smart.com/" target="_blank" rel="nofollow"&gt;www.smart.com&lt;/a&gt;&lt;/small&gt;</option>
					<option>Volkswagen - &lt;small&gt;&lt;a href="http://volkswagen.com/" target="_blank" rel="nofollow"&gt;volkswagen.com&lt;/a&gt;&lt;/small&gt;</option>
					<option>Volvo - &lt;small&gt;&lt;a href="http://www.volvo.com/" target="_blank" rel="nofollow"&gt;www.volvo.com&lt;/a&gt;&lt;/small&gt;</option>
				</select>
	</div>
</div>
<script type="text/javascript" src="http://libs.useso.com/js/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.editable-select.min.js"></script>
<script type="text/javascript">
    $('#editable-select').editableSelect({
        effects: 'slide',
        onSelect: function (element) {		//选择时将option的value值赋给input的data-val属性，然后通过 $('#editable-select').attr('data-val')取值
            $('#editable-select').attr('data-val', element.val());
        }
    });
$('#html').editableSelect();
</script>

<div id="footer">
</div>
</body>
</html>